<template>
  <a-card>
    <a-spin :spinning="confirmLoading">
      <div>
        <a-table
          :columns="accountColumns"
          :rowKey="record => record.pid"
          :dataSource="accountsData"
          :pagination="paginations"
        >
          <span slot="action" slot-scope="text, record">
            <template>
              <a v-if="record.accountType === 'passwd'" @click="handleChangePasswd(record)">修改密码</a>
            </template>
          </span>
        </a-table>
      </div>
      <accountChange-modal ref="AccountChangeModal" />
    </a-spin>
  </a-card>
</template>

<script>
import { getAccountByPersonPid, getAccountCountByPersonPid } from '@/views/sys/org/department/account'
import AccountChangeModal from '@/views/sys/org/department/modules/AccountChangeModal'

export default {
  name: 'ChangePasswd',
  components: {
    AccountChangeModal
  },
  props: {
  },
  data () {
    return {
      personPid: '0',
      confirmLoading: false,
      paginations: {
        total: 0,
        pageSize: 10,
        currentPage: 1
      },
      // accountTypes: ['passwd'],
      accountColumns: [
        {
          title: '应用名称',
          dataIndex: 'appId',
          customRender: function (text) {
            if (text === 'huiwcore') {
              return '平台应用'
            } else {
              return text
            }
          }
        },
        {
          title: '昵称',
          dataIndex: 'accountName'
        },
        {
          title: '账号名',
          dataIndex: 'accountId'
        },
        {
          title: '账号类型',
          dataIndex: 'accountType',
          customRender: function (text) {
            if (text === 'passwd') {
              return '账号密码'
            } else if (text === 'wx') {
              return '微信授权'
            } else if (text === 'wxXcx') {
              return '微信小程序'
            } else if (text === 'wxWork') {
              return '企业微信'
            } else if (text === 'aliPay') {
              return '支付宝授权'
            } else if (text === 'aliXcx') {
              return '支付宝小程序'
            } else {
              return text
            }
          }
        },
        {
          title: '到期时间',
          dataIndex: 'expireTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      accountsData: []
    }
  },
  beforeCreate () {
  },
  created () {
  },
  mounted () {
    this.getAccount('me')
  },
  methods: {
    showTotal (total) {
      return `共 ${total} 条`
    },
    showModal (personPid) {
      this.personPid = personPid
      this.getAccount(personPid)
      this.visible = true
    },
    // 得到账号表
    getAccount (personPid) {
      this.confirmLoading = true
      if (personPid) {
        new Promise((resolve) => {
          resolve(getAccountByPersonPid(personPid, {}, 10, 1))
        }).then(res => {
          if (res.code === 'C1') {
            this.accountsData = res.data
          }
          this.confirmLoading = false
        })
        getAccountCountByPersonPid(personPid, {})
          .then(res => {
            if (res.code === 'C1') {
              this.paginations.total = res.data
              this.paginations.showTotal = this.showTotal
            }
          })
      }
    },
    // 点击修改密码
    handleChangePasswd (record) {
      this.$refs.AccountChangeModal.showModal(record)
    }
  }
}
</script>

<style>
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
